<template>

	<view class="gui-list gui-margin-top gui-padding-x gui-bg-white">
		<view class="gui-list-items">
			<view class="gui-flex gui-row gui-space-around gui-flex1 gui-border-b">
				<view class="gui-list-body ">
					<text class="gui-list-title-text">头像</text>
				</view>
				<view>
					<button type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar"
						style="width: 60rpx;height: 60rpx;border: none; padding-left: 0;padding-right: 0;margin-top: 20rpx;margin-right: 40rpx;">
						<image :src="avatarUrl" class="avatar-image" mode="widthFix"
							style="width: 100%; position: relative;"></image>
					</button>
				</view>
			</view>
		</view>
		<view class="gui-list-items gui-border-b">
			<view class="gui-list-body ">
				<view class="gui-list-title">
					<text class="gui-list-title-text">昵称</text>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center">
				<text v-if="isEdit!=0"
					class="gui-text gui-color-gray">{{userInfo.userName}}</text>
				<input v-else type="text" placeholder="请输入昵称" v-model="userInfo.userName" />
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-list-items gui-border-b" @click="setPhone">
			<view class="gui-list-body ">
				<view class="gui-list-title">
					<text class="gui-list-title-text">手机号</text>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center">
				<text v-if="isEdit!=0" class="gui-text gui-color-gray">{{userInfo.phone}}</text>
				<input v-else type="text" placeholder="请输入手机号" v-model="userInfo.phone" />
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-list-items gui-border-b" @click="">
			<view class="gui-list-body ">
				<view class="gui-list-title">
					<text class="gui-list-title-text">性别</text>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center">
				<text v-if="isEdit!=0" class="gui-text gui-color-gray">{{userInfo.sex}}</text>
				<input v-else type="text" placeholder="请修改性别" v-model="userInfo.sex" />
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-list-items gui-border-b" @click="">
			<view class="gui-list-body ">
				<view class="gui-list-title">
					<text class="gui-list-title-text">城市</text>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center">
				<text v-if="isEdit!=0" class="gui-text gui-color-gray">{{userInfo.tags}}</text>
				<input v-else type="text" placeholder="请输入城市" v-model="userInfo.tags" />
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
		<view class="gui-list-items gui-border-b" @click="">
			<view class="gui-list-body ">
				<view class="gui-list-title">
					<text class="gui-list-title-text">个人简介</text>
				</view>
			</view>
			<view class="gui-flex gui-align-items-center">
				<text v-if="isEdit!=0" class="gui-text gui-color-gray">{{userInfo.remark}}</text>
				<input v-else type="text" placeholder="请输入个人简介" v-model="userInfo.remark" />
				<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
			</view>
		</view>
	</view>

	<!-- 	<view class="gui-padding-x gui-bg-white gui-margin-top">
		<view class="gui-list-items" @click="goPage('/pages/user/protocol')">
			<view class="gui-list-body gui-border-b">
				<view class="gui-list-title">
					<text class="gui-list-title-text">用户协议</text>
				</view>
			</view>
			<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
		</view>
		<view class="gui-list-items" @click="goPage('/pages/user/privicy')">
			<view class="gui-list-body gui-border-b">
				<view class="gui-list-title">
					<text class="gui-list-title-text">隐私政策</text>
				</view>
			</view>
			<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
		</view>
		<view class="gui-list-items" @click="goPage('/pages/user/notice')">
			<view class="gui-list-body gui-border-b">
				<view class="gui-list-title">
					<text class="gui-list-title-text">消息通知</text>
				</view>
			</view>
			<text class="gui-list-arrow-right gui-icons gui-color-gray">&#xe601;</text>
		</view>
	</view> -->

	<view class="gui-margin-top gui-padding" v-if="isEdit!=0">
		<button class="gui-button gui-bg-blue gui-noborder" type="default" @click="quit">
			<text class="gui-text-center gui-block-text gui-icons logoff gui-color-white"> 退出登录</text>
		</button>
	</view>

	<view class="gui-margin-top gui-padding" v-if="isEdit==0">
		<button class="gui-button gui-bg-blue gui-noborder" type="default" @click="editMessage">
			<text class="gui-text-center gui-block-text gui-icons logoff gui-color-white">保存</text>
		</button>
	</view>



</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '/static/images/avatar.png',
				isEdit: '',
				userInfo: {	
					userName: '',
					phone: '',
					sex: '',
					tags: '',
					remark: '',
				}
			}
		},
		onLoad(e) {
			this.isEdit = e.type
			let u = uni.gRequest.checkLogin();
			uni.gRequest.get('fhxmuser/' + u.userId).then(res => {

				if (res.data.image) {

					this.avatarUrl = uni.gRequest.file + res.data.image
				}
				this.userInfo = res.data
			})
		},
		methods: {
			// 上传微信头像
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;

				this.avatarUrl = avatarUrl


				let u = uni.gRequest.checkLogin();
				//上传图片
				uni.uploadFile({
					url: uni.gRequest.server + "file/upload",
					filePath: self.avatarUrl,
					header: {
						"Authori-zation": u.token
					},
					name: 'file',
					success: (uploadFileRes) => {
						console.log(uploadFileRes.data);
						uni.gRequest.get('fhxmuser/update/information', {
							type: '头像',
							information: JSON.parse(uploadFileRes.data).fileName
						}).then(res => {

						})
					}
				});

			},
			// 修改用户资料
			editMessage() {
				let self = this
				uni.gRequest.post('fhxmuser/updateUser', JSON.stringify(self.userInfo)).then(res => {
					uni.navigateBack() 
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})		
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 退出登录
			quit() {
				uni.showModal({
					title: "温馨提示",
					content: '确定退出吗?',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/wchatLogin'
							})
							uni.removeStorageSync('userInfo')
						}
					}
				})

			},
			// 保存资料
			save() {}
		}
	}
</script>

<style scoped>
	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		margin: 16rpx 0;
	}

	input {
		font-size: 26rpx;
	}
</style>